<script>
import domUtil from 'wind-dom'

export default {
  name: 'CategoryAside',
  props: {
    types: {
      type: Array,
      default: []
    },
    categories: {
      type: Object,
      default: {}
    }
  },
  methods: {
    selectCategory(alias, e) {
      let li = e.currentTarget.parentElement
      if (!domUtil.hasClass(li, 'active')) {
        let activeLi = this.$el.querySelector('.subcategory-aside > .active')
        if (activeLi) {
          domUtil.removeClass(activeLi, 'active')
        }

        domUtil.addClass(li, 'active')
      }

      this.$emit('category-selected', alias)
    }
  }
}
</script>

<template>
<ul class="category-aside">
  <li v-for="type in types">
    <div class="aside-item">
      <i :class="'icon icon-top-fix-5 icon-' + type.name.toLowerCase()"></i>&nbsp;{{ type.description }}
    </div>
    <ul class="subcategory-aside">
      <li v-for="category in categories[type.name]" :class="">
        <a href="javascript: void(0)" class="aside-item" @click="selectCategory(category.alias, $event)" >{{ category.name }}</a>
      </li>
    </ul>
  </li>
</ul>
</template>

<style>
.category-aside {
  float: left;
  width: 300px;
  padding-right: 20px;
}

.category-aside .aside-item {
  display: block;
  padding: 8px 10px 6px;
  border: 1px solid #eee;
  border-left: 0;
  border-right: 0;
  font-size: 16px;
  font-weight: 700;
}

.subcategory-aside {
  padding: 15px 20px;
}

.subcategory-aside > li {
  position: relative;
}

.subcategory-aside > li:before {
  position: absolute;
  content: '';
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ccc; 
  left: 20px;
  top: 8px;
}

.subcategory-aside .aside-item {
  position: relative;
  padding: 5px 20px;
  padding-left: 35px;
  border: 0;
  color: #333;
  font-size: 14px;
  font-weight: 400;
}

.subcategory-aside > .active > .aside-item {
  color: #64D4BC;
}

.subcategory-aside > .active:before {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #64D4BC;
}
</style>